Marvel API - Get personages met Ajax bibliotheek

Het is veel eenvoudiger de complexiteit van het XMLHttpRequest object te vertoppen in een klasse zodat we ons kunnen concentreren om de API zelf. De interactieve documentatie is een goede plek om van te vertrekken. We beginnen met alle Marvel personages op te halen en tonen ze in een tabel.

Stappen

Uit het voorbeeld van de interactieve documentatie halen we de url op:

https://gateway.marvel.com:443/v1/public/characters?apikey=5e50ffa08294f9673a4876bb8738ab43

We willen 100 (dat is het maximum aantal) items ophalen:

https://gateway.marvel.com:443/v1/public/characters?limit=100&apikey=5e50ffa08294f9673a4876bb8738ab43

Of alle personnages die beginnen met een s:

https://gateway.marvel.com:443/v1/public/characters?nameStartsWith=s&apikey=5e50ffa08294f9673a4876bb8738ab43

We laden de ajax.js library:

<script type="text/javascript" src="js/ajax.js"></script>

We maken een instantie van de Ajax klasse in het onload event van het window object omdat de pagina volledig geladen moet zijn alvoerens de JavaScript code uit te voeren:

window.onload = function() {
    var ajax = new Ajax();
}

Een vab de hierboven vermelde url's stoppen we in onze ajax call:

window.onload = function() {
    var ajax = new Ajax();
    ajax.getRequest('https://gateway.marvel.com:443/v1/public/characters?limit=100&apikey=5e50ffa08294f9673a4876bb8738ab43',
         showMarvelCharacters);
}

En we maken die functie die moet worden uitgevoerd als de browser het antwoord van de server heeft gekregen:

function showMarvelCharacters(response) {
    // convert JSON to array
    // we zijn alleen geïnteresseerd in de personnages
    var characters = JSON.parse(response).data.results;
    var table = document.createElement('table');
    characters.map(function(character) {
        var row = document.createElement('tr');
        var name = document.createElement('td');
        var textContent = document.createTextNode(character.name);
        name.appendChild(textContent);
        row.appendChild(name);
        table.appendChild(row);
    });
    document.body.appendChild(table);
}

Volledige code

De volgende code plaats je in een bestand met de naam marvel-GET-met-ajax-library.html. Vergeet niet dat je het ajax.js (code vind je in Een Ajax bibliotheek) bestand moet staan hebben in de folder met de naam js:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ajax library gebruiken om toegang te krijgen tot Marvel API's</title>
    <script type="text/javascript" src="js/ajax.js"></script>
    <script>
        window.onload = function() {
            var ajax = new Ajax();
            ajax.getRequest('https://gateway.marvel.com:443/v1/public/characters?limit=100&apikey=5e50ffa08294f9673a4876bb8738ab43', 
                showMarvelCharacters);
        }

        function showMarvelCharacters(response) {
            // convert JSON to array
            // we zijn alleen geïnteresseerd in de personnages
            var characters = JSON.parse(response).data.results;
            var table = document.createElement('table');
            characters.map(function(character) {
                var row = document.createElement('tr');
                var name = document.createElement('td');
                var textContent = document.createTextNode(character.name);
                name.appendChild(textContent);
                row.appendChild(name);
                table.appendChild(row);
            });
            document.body.appendChild(table);
        }
    </script>
</head>
<body>
</body>
</html>

2018-10-15 13:29:25